<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Test</title>
  <link rel="stylesheet" href="./styles/default.css">
  <style>
    s-card {
      height: 100px;
    }
  </style>
</head>

<body>
  <s-page>
    <main>
      <s-menu>
        <s-button slot="trigger">菜单</s-button>
        <s-menu-item>选项1</s-menu-item>
        <s-menu-item>选项2</s-menu-item>
        <s-menu-item>选项3</s-menu-item>
        <s-menu-item>选项4</s-menu-item>
        <s-menu-item>选项5</s-menu-item>
      </s-menu>

      <s-menu>
        <s-button slot="trigger">菜单</s-button>
        <s-menu-item>播放</s-menu-item>
        <s-menu-item>播放相似单曲</s-menu-item>
        <s-menu-item>我喜欢</s-menu-item>
        <s-menu group="start">
          <s-menu-item slot="trigger">
            添加到
            <s-icon slot="end" type="arrow_drop_right"></s-icon>
          </s-menu-item>
          <s-menu>
            <s-menu-item slot="trigger">
              试听列表
              <s-icon slot="end" type="arrow_drop_right"></s-icon>
            </s-menu-item>
            <s-menu-item>我的</s-menu-item>
            <s-menu-item>创建...</s-menu-item>
          </s-menu>
          <s-menu-item>添加到新歌单</s-menu-item>
        </s-menu>
        <s-menu group="end">
          <s-menu-item slot="trigger">
            更换音质
            <s-icon slot="end" type="arrow_drop_right"></s-icon>
          </s-menu-item>
          <s-menu-item>标准品质</s-menu-item>
          <s-menu-item>HQ高品质</s-menu-item>
          <s-menu-item>SQ无损品质</s-menu-item>
        </s-menu>
        <s-menu-item>查看评论(520)</s-menu-item>
        <s-menu group="start">
          <s-menu-item slot="trigger">
            删除
            <s-icon slot="end" type="arrow_drop_right"></s-icon>
          </s-menu-item>
          <s-menu-item>
            <s-icon slot="start" type="add"></s-icon>
            删除
          </s-menu-item>
          <s-menu-item>删除(包括文件)</s-menu-item>
        </s-menu>
        <s-menu>
          <s-menu-item slot="trigger">
            更多操作
            <s-icon slot="end" type="arrow_drop_right"></s-icon>
          </s-menu-item>
          <s-menu-item>复制歌曲信息</s-menu-item>
          <s-menu-item>查看文件信息</s-menu-item>
          <s-menu-item>取消匹配歌曲</s-menu-item>
        </s-menu>
      </s-menu>

      <div>
        <p></p>
        <button></button>
        <button></button>
        <p></p>
        <button></button>
        <button></button>
      </div>
    </main>
  </s-page>

  <script type="module" src="../dist/main.js"></script>
  <script type="module" src="./scripts/default.js"></script>
</body>

</html>